import React, { Component, useEffect, useState } from "react";
import Titles from "../title/Titles";
import { weather_api } from "../../../services/weather";

export class Left_top extends Component {
  constructor(props: any) {
    super(props);
    this.state = {
      message: {
        title: "环境监测",
      },
      list: [],
    };
  }
  // componentDidMount() {
  //   weather_api({
  //     unescape: 1,
  //     version: "v62",
  //     appid: "25522658",
  //     appsecret: "W5GK3pcd",
  //   }).then((res) => {
  //     this.setState({
  //       list:res.data.data
  //     })
  //   });
  // }

  render() {
    const { message } = this.state;

    return (
      <div className="Left_top">
        <div className="titles_top">
          <Titles message={message}></Titles>
        </div>
        <div className="gap"></div>
        <div className="temperature">
          <p>
            <span className="tempm">℃</span>
            <span className="temps">℃</span>
            <span className="yellowWarning">
              <i className="iconfont icon-weibiaoti-"></i>高温黄色预警
            </span>
          </p>
        </div>
        <div className="synthesis">
          <div className="feel">
            <i className="iconfont icon-tiganwendu"></i>
            <span>体感</span>
            <b>℃</b>
          </div>
          <hr className="hrLine" />
          <div className="wind">
            <i className="iconfont icon-fengli"></i>
            <span>风力</span>
          </div>
          <hr className="hrLine" />
          <div className="wend">
            <i className="iconfont icon-shidu"></i>
            <span>温度</span>
          </div>
        </div>
        <div className="NewFuture">
          <div className="newLeft">
            <p>
              ~<span className="newLeft_span1">℃</span>
              <span className="newLeft_span2">
                <i className="iconfont icon-yueliang"></i>
              </span>
            </p>
            <p>
              今天<span className="newLeft_span4"></span>
              <span className="newLeft_span3">晴</span>
            </p>
          </div>
          <div className="futrueRight">
            <p>
              ~<span className="newLeft_span1">℃</span>
              <span className="newLeft_span2">
                <i className="iconfont icon-taiyang"></i>
              </span>
            </p>
            <p>
              今天<span className="newLeft_span4"></span>
              <span className="newLeft_span3">晴</span>
            </p>
          </div>
        </div>
      </div>
    );
  }
}

export default Left_top;
